@import "src/web/variables";
@import "./lib";

:host {
    $state-line-sent: $app-color-primary-light;
    $state-line-received: $app-color-purple-light;
    $state-line-draft: #febe5e;
    $state-line-with: 4px;
    $state-line-margin: 3px;

    display: flex;
    flex-direction: column;
    padding: $app-db-view-mail-padding-y $app-db-view-mail-padding-x;
    position: relative;

    .r {
        display: flex;
    }

    .c-auto {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 0 0 auto;
    }

    .c-stretch {
        display: flex;
        flex: 1 1 auto;
        overflow: hidden;

        .ellipsis {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    &.unread-1 {
        .subject {
            font-weight: bold;
        }
    }

    @mixin mail-type-highlighter() {
        display: block;
        content: "";
        position: absolute;
        left: $state-line-margin;
        width: $state-line-with;
        bottom: $state-line-margin;
        background-color: transparent;
    }

    &::before {
        @include mail-type-highlighter;
        top: $state-line-margin;
    }

    &.state- {
        &protonmail_inbox_and_sent {
            &::before {
                background-color: $state-line-sent;
            }

            &::after {
                @include mail-type-highlighter;
                background-color: $state-line-received;
                height: calc(50% - #{$state-line-margin});
            }
        }

        &sent {
            &::before {
                background-color: $state-line-sent;
            }
        }

        &received {
            &::before {
                background-color: $state-line-received;
            }
        }

        &draft {
            &::before {
                background-color: $state-line-draft;
            }
        }
    }

    .fa {
        font-size: 85%;
        align-self: center;

        &.fa-lock {
            color: $app-color-primary-light;
        }
    }

    .conversation-size,
    .address,
    .score,
    .folders,
    .date {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        font-size: $app-font-size-base-small;
    }

    &.selected {
        .address,
        .conversation-size,
        .date,
        .score,
        .folders > .b {
            background-color: darken(theme-color("warning-light"), 5%);
        }
    }

    .b {
        border-radius: $badge-border-radius;
        padding: ($badge-padding-y * 0.15) $badge-padding-x;
    }

    .address {
        margin-left: ($state-line-margin / 2) + $state-line-with;
    }

    .subject {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
}
